<!--<div class="col-md-12 well well-transparent">-->
<div class="well well-transparent">
    <div class="row vertical-offset-100">
        <div class="col-md-4 col-md-offset-4">
            <span class="app-loading-container" ><span class="app-loading-animation"
                                                       data-ng-class="status"></span></span>
        </div>

    </div>

    <div class="row">
        <div class="col-md-5 col-sm-4 titulo">
            <h2>Role</h2>

        </div>
        <div id="msg" class="col-md-7  col-sm-8">
            <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)" title="{{alert.title}}">{{alert.msg}}</alert>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="btn-group open-close-popup" ng-init="keepOpen();
                    openClosePopUp();">
                <button type="button" class="btn btn-primary  open-popup pull-left">
                    <span class="glyphicon glyphicon-filter"></span> Filtro
                </button>
                <ul class="dropdown-menu keep_open form-dropdown  nx-popup" id="filtroPopup" role="menu">
                    <li class="dropdown" role="menuitem">
                        <div class="panel panel-default">

                            <div class="panel-body">

                                <!--div class="row"-->
                                <div class="form-group">
                                    <label for="nome">
                                        Nome:</label><br />
                                    <input type="text" class="form-control" ng-model="filtro.nome" />
                                </div>
                                <div class="form-group">
                                    <label for="ativo">
                                        Ativo</label>
                                    <span class="glyphicon glyphicon-asterisk obrigatorio"></span>
                                    <select name="ativo" id="ativo" class="form-control col-md-12" ng-model="ativoFiltro">
                                        <option value=""></option>
                                        <option value="S">Ativo</option>
                                        <option value="N">Desativo</option>
                                    </select>
                                </div>

                                <a ng-click="listar()" class="btn btn-primary close-popup"> Buscar</a>
                                <a class="btn btn-default close-popup"> Fechar</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <!-- Lista -->
            <a ng-click="limpar()" class="btn btn-primary"><span class="glyphicon glyphicon-minus">
                </span> Limpar</a>

            <!-- POPUP -->
            <!-- class:  open-close-popup  -->
            <!-- ng-init:  keepOpen();openClosePopUp();  -->
            <div id="popManut" class="btn-group  open-close-popup" ng-init="keepOpen();
                    openClosePopUp();">
                <!-- POPUP -->
                <!-- class: open-popup  -->
                <button type="button" class="btn btn-primary  pull-left open-popup"
                        ng-click="novo()">
                    <span class="glyphicon glyphicon-plus"></span> Novo
                </button>
                <!-- POPUP -->
                <!-- class: keep_open  -->
                <ul class="dropdown-menu keep_open form-dropdown" id="idNovo" role="menu"
                    style="width: 600px;">
                    <li class="dropdown" role="menuitem">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <strong>Role</strong></div>
                            <div class="panel-body">
                                <form name="formRole" role="form" id="formRole">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="nome">
                                                    Nome</label>
                                                <span class="glyphicon glyphicon-asterisk obrigatorio"></span>
                                                <input type="text" class="form-control required" id="nome"
                                                       name="nome" ng-model="objSelecionado.nome" />
                                            </div>
                                            <div class="form-group">
                                                <label for="descricao">
                                                    Descricao</label>
                                                <span class="glyphicon glyphicon-asterisk obrigatorio"></span>
                                                <input type="text" class="form-control required" id="descricao"
                                                       name="descricao" ng-model="objSelecionado.descricao" />
                                            </div>
                                            <div class="form-group"
                                                 ng-show="objSelecionado.roleId !== 0">
                                                <label for="ativo">
                                                    Ativo</label>
                                                <span class="glyphicon glyphicon-asterisk obrigatorio"></span>
                                                <select name="ativo" id="ativo" class="form-control col-md-12" ng-model="ativo">
                                                    <option value="S">Ativo</option>
                                                    <option value="N">Desativo</option>
                                                </select>
                                            </div>

                                        </div>

                                    </div>
                                </form>
                                <a ng-click="salvar()" class="btn btn-success"><span class="glyphicon glyphicon-ok">
                                    </span> Salvar</a>
                                <a ng-click="novo()" class="btn btn-primary" 
                                   ng-show="objSelecionado.roleId > 0"><span class="glyphicon glyphicon-plus">
                                    </span> Novo</a>
                                <a ng-click="excluirConfirma(objSelecionado)" class="btn btn-danger"
                                   ng-show="objSelecionado.roleId > 0"><span class="glyphicon glyphicon-remove">
                                    </span> Excluir</a>

                                <!-- POPUP -->
                                <!-- class: close-popup  -->
                                <a class="btn btn-default close-popup"> Fechar</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class=" table-responsive">
        <table class="table table-hover table-bordered lista">
            <thead class="fundo_cinza_claro">
                <tr>
                    <th ng-click="ordenarLista('nome')">
                        Nome
                    </th>
                    <th ng-click="ordenarLista('descicao')">
                        Descição
                    </th>

                    <th colspan="2" class="opcoes">
                        Opções
                    </th>


                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="role in roles| orderBy:orderProp:orderOption">
                    <!-- repeat de ocorrencias in ocorrencia-->
                    <td class="col-md-6" ng-click="editar(role.roleId)">
                        <a>{{role.nome}}</a>
                    </td>
                    <td class="col-md-6" ng-click="editar(role.roleId)">
                        <a>{{role.descricao}}</a>
                    </td>

                    <td title="Editar" class="opcoes">
                        <a ng-click="editar(role.id)" class="btn btn-primary" data-dismiss="modal"><i
                                class="glyphicon glyphicon-edit"></i></a>
                    </td>
                    <td title="Excluir" class="opcoes">
                        <a ng-click="excluirConfirma(role)" class="btn btn-danger" data-dismiss="modal"><i class="glyphicon glyphicon-remove">
                            </i></a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Modal para confirmação de exclusão -->
<div class="modal fade" id="modalConfirma" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog  modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-title" id="H2"> Deseja excluir ?</h3>
            </div>
            <div class="modal-body">
                <form name="formConfirma" role="form" id="formConfirma">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6 col-xs-6 col-sm-6">
                                <a ng-click="excluir()" class="btn btn-success" data-dismiss="modal"><span class="glyphicon glyphicon-ok">
                                    </span> Sim</a>
                            </div>
                            <div class="col-md-6 col-xs-6 col-sm-6">
                                <a type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove">
                                    </span> Não</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>